<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>订单管理</title>
		<!-- 引入 Bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/popDrag.css">
		<link rel="stylesheet" type="text/css" href="css/manage.css">
		<script src="js/vue.js"></script>
		<script src="js/PopDrag.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
		  var t = null;
		  t = setTimeout(time, 1000); //開始运行
		  function time() {
		    clearTimeout(t); //清除定时器
		    dt = new Date();
		    var y = dt.getFullYear();
		    var mt = dt.getMonth() + 1;
		    var day = dt.getDate();
		    var h = dt.getHours(); //获取时
		    var m = dt.getMinutes(); //获取分
		    var s = dt.getSeconds(); //获取秒
		    document.querySelector(".showTime").innerHTML =
		      y +
		      "年" +
		      mt +
		      "月" +
		      day +
		      "日" +
		      h +
		      "时" +
		      m +
		      "分" +
		      s +
		      "秒";
		    t = setTimeout(time, 1000); //设定定时器，循环运行
		  }
		</script>
	</head>

	<style>
		a{
			color:#fff;
		}
		h1{
			text-align: center;
		}
		th{
			text-align: center;
		}
	</style>

	<body onload="time()">
		<div class="div1">
			<div class="logo">
				<a href="index.html"></a>
			</div>
			<div class="welcome">
				<h>欢迎进行订单管理</h>
			</div>
		</div>
		<div class="bl">
			<div class="showTime"></div>
		</div>
		<div>
			<div class="daohang">
				<li class="d1"><button class="btn1" onclick="window.location.href='/commoditymanage'">商品管理</button></li>
				<li class="d1"><button class="btn1" onclick="window.location.href='/ordermanage'">订单管理</button></li>
			</div>
			<div class="main2">
				<table class="table table-striped table-bordered table-hover text-center">
					<thead>
					<tr style="text-align:center">
						<th>订单编号</th>
						<th>地址</th>
						<th>电话</th>
						<th>操作</th>
					</tr>
					</thead>
						<tr th:each="orders:${orders}">
							<td th:text="${orders.orderno}"></td>
							<td th:text="${orders.location}"></td>
							<td th:text="${orders.tel}"></td>
							<td>
								<form th:action="@{'/ordercorrection/'+${orders.orderno}}" method="post">
								<input id="btn1" type="submit" value="更改" class="btn btn-primary" />
								<a class="btn btn-danger" th:href="@{'/orderdelete/'+${orders.orderno}}">删除</a>
								</form>
							</td>
						</tr>
				</table>
				<input id="btn" type="button" value="添加订单" class="btn btn-primary"> 
				<!--遮罩层-->
				<div id="textPopBox" class="popBox" >
				    <h3 class="popBoxHandle">添加订单</h3>  
				    <form action="/orderadd" method="post">
				        <table width="100%" cellpadding="5">  
				            <tr>  
				                <td width="200" align="right">  
				                    订单编号：      
				                </td>  
								<td>
									&#12288; <input type="number" placeholder="请输入订单编号" name="orderno"/>
								</td>
				            </tr>
							<tr>
							    <td width="200" align="right">
									地址：
							    </td>  
								<td>
									&#12288; <input type="text" placeholder="请输入地址" name="location"/>
								</td>
							</tr>
							<tr>
							    <td width="200" align="right">
									总价：
							    </td>  
								<td>
									&#12288; <input type="number" placeholder="请输入总价" name="tel" step="0.01"/>
								</td>
							</tr>
				            <tr>  
				                <td colspan="2" align="center">  
				                    <br />  
				                    <input id='ok' type="submit" class="button green" value="        确    认        " />
				                    <input id='cancel' type="button" class="button blue" value="        取    消        " />  
				                </td>  
				            </tr>  
				        </table>  
				    </form>  
				</div>  
			</div>
		</div>
		<script type="text/javascript">
		    //初始化弹出框  
		    var p = new PopUp({  
		        id:"textPopBox"  
		    });  
			
		    //缩放窗口时重新定位弹出框及遮罩层的宽度和高度  
		    EventUtil.addEvent(window,'resize', function() {  
		        p.setPosition();  
		        //如果开启遮罩层，遮罩层元素存在，则重新定位遮罩层  
		        p.enableShadow && p.enableShadow.shadow && p.enableShadow.setProperty(p.enableShadow.shadow);  
		    });  
			
		    EventUtil.addEvent(EventUtil._$('btn'),'click', function() {  
		        p.show({//定义坐标，如果缺省则居中显示  
		        });  
		    });  
			 
		    EventUtil.addEvent(EventUtil._$('ok'),'click', function() {  
		        //自定义点击确定按钮之后得操作  
		        var t =$("#backReason").val();  
		        alert("添加成功！");
		        //隐藏弹出框  
		        p.hide();  
		    });  
		    EventUtil.addEvent(EventUtil._$('cancel'),'click', function() {  
		        //自定义点击取消按钮之后得操作,隐藏弹出框  
		        p.hide();  
		    });  
			
		    //当按下ESC键时关闭弹出框  
			EventUtil.addEvent(document,'keyup',function(e) {  
				e = e || window.event;  
				e.keyCode == 27 && p.hide();  
			});  
			
		    EventUtil.addEvent(window,'load',function() {  
		        if((isIE6 || isOpera) && p.isScroll != null && p.isScroll == 'enabled') {  
		            EventUtil.addEvent(window,'scroll', function() {  
		                setTimeout(function() {  
		                    p.setPosition();  
		                },100);  
		            });  
		        }  
		    });
			EventUtil.addEvent(window,'load',function() {
			    if((isIE6 || isOpera) && q.isScroll != null && q.isScroll == 'enabled') {  
			        EventUtil.addEvent(window,'scroll', function() {  
			            setTimeout(function() {  
			                q.setPosition();  
			            },100);  
			        });  
			    }  
			});  
		    //单选按钮的点击切换事件  
		    function openText(self) {  
		        var value = $(self).val();  
		        if ("true"==value) {  
		            $('#reasonText').css("display", "");  
		        } else {  
		            $('#reasonText').css("display", "none");  
		        }  
		    }
			
		</script> 
	</body>

</html>